<template>
  <view class="main">
    <view class="tel">
      <view class="tel_left">账号</view>
      <view class="tel_center"><input placeholder='请输入您的手机号' type='number'/></view>
      <button class="tel_right" @getphonenumber="getPhoneNumber" open-type="getPhoneNumber">微信手机号授权</button>
    </view>
    <view class="code">
      <view class="code_left tel_left">校验码</view>
      <view class="code_center tel_center"><input placeholder='请输入校验码' type='number'/></view>
      <view class="code_right"><button>获取校验码</button></view>
    </view>
    <view class="login_btn"><button>登录</button></view>
  </view>
</template>

<script>
  import {api} from "../../utils/api";
  import {router} from "../../utils/router";

  export default {
    name: "index",
    components: {},
    data() {
      return {}
    },
    created() {
    },
    onUnload() {
      router.toHome()
    },
    methods: {
      async getPhoneNumber(e) {
        //用户点击确认
        const detail = e.mp.detail;
        if(detail.iv) {
          const res = await api.bindTelDirect(detail.iv, detail.encryptedData)
        }
        //用户点击拒绝
        else {

        }
      }
    }
}
</script>

<style scoped>
  .main {
    width: 100%;
    height: 100%;
    padding: 110rpx 60rpx 0 58rpx;
    box-sizing: border-box;
  }

  /*共同样式  */
  .tel,.code {
    width: 100%;
    height: 88rpx;
    border-bottom: 1rpx solid #eee;
  }

  /*左边样式 */
  .tel_left {
    width: 128rpx;
    height: 88rpx;
    float: left;
    padding: 22rpx 0 22rpx 0;
    box-sizing: border-box;
    font-family: PingFangSC-Regular;
    font-size: 32rpx;
    color: #333;
  }

  /*中间样式  */
  .tel_center {
    width: 306rpx;
    height: 88rpx;
    float: left;
    font-family: PingFangSC-Regular;
    font-size: 24rpx;
    color: #999;
    padding: 20rpx 0 24rpx 0;
    box-sizing: border-box;
  }

  /*微信手机号授权  */
  .tel_right{
    width: 196rpx;
    height: 88rpx;
    float: right;
    padding: 10rpx 0 10rpx 0;
    box-sizing: border-box;
    font-family: PingFangSC-Regular;
    font-size: 28rpx;
    color: #ff6d6d;
    background: none;

  }

  .tel_right::after{
    border: none;
    color: #ff6d6d;
  }
  .code {
    margin-top: 42rpx;
    border-bottom: 1rpx solid #eee;
  }

  /*获取校验码按钮  */
  .code_right {
    font-family: PingFangSC-Regular;
    font-size: 20rpx;
    color: #fff;
    width: 140rpx;
    height: 88rpx;
    float: right;
    padding: 20rpx 0 20rpx 0;
    box-sizing: border-box;
  }

  .code_right button {
    width: 140rpx;
    height: 48rpx;
    font-size: 20rpx;
    background: #ff9797;
    border-radius: 38rpx;
    color: #fff;
    padding: 0;
  }

  /*登录按钮  */
  .login_btn {
    margin-top: 100rpx;
    padding: 0 14rpx 0 20rpx;
    box-sizing: border-box;
    width: 100%;
    height: 80rpx;
  }

  .login_btn button {
    width: 480rpx;
    height: 80rpx;
    background: #ff6d6d;
    border: 0 solid #e23d3d;
    border-radius: 8rpx;
    font-family: PingFangSC-Regular;
    font-size: 32rpx;
    color: #fff;
  }
</style>
